<!-- 使用模版导出  超多配置  可配置布局   -->
<template>
  <div class="page-container">
    <div class="flex-wrap">
      <div class="text-box">
        <h3>凡人歌</h3>
        <p>
          歌曲创作
          <a
            href="https://www.bing.com/search?q=%E6%9D%8E%E5%AE%97%E7%9B%9B&FORM=SNAPST"
            >李宗盛</a
          >
        </p>
        <pre>
            你我皆凡人 生在人世間
            終日奔波苦 一刻不得閒
            既然不是仙 難免有雜念
            道義放兩旁 利字擺中間
            多少男子漢 一怒為紅顏
            多少同林鳥 已成分飛燕
            人生何其短 何必苦苦戀
            愛人不見了 向誰去喊冤
            問你何時曾看見 這世界為了人們改變
            有了夢寐以求的容顏 是否就算是擁有春天
            你我皆凡人 生在人世間
            終日奔波苦 一刻不得閒
            你既然不是仙 難免有雜念
            道義放兩旁 把利字擺中間
            多少男子漢 一怒為紅顏
            多少同林鳥 已成了分飛燕
            人生何其短 何必苦苦戀
            愛人不見了 你向誰去喊冤
            問你何時曾看見 這個世界為了人們改變
            有了夢寐以求的容顏 是否就算是擁有春天
        </pre>
        <button class="export-btn" @click="exportHandler">导出</button>
      </div>

      <div class="image-box">
        <img
          src="https://n.sinaimg.cn/sinakd20240918s/294/w700h394/20240918/1292-6036922e916f4c9ca7aa8294087a6d01.jpg"
        /><br />
        <img src="https://p1.ssl.qhimg.com/t014ec32651780cdcb7.jpg" />
      </div>
    </div>
    <!-- ff -->

    <div class="footer">
      <img width="30px" src="/sun.png" />
      <img
        width="30px"
        v-for="num in 8"
        :key="`img-${num}`"
        src=""
      />
      <img width="30px" src="/sun.png" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import FileSaver from "file-saver";
import { asBlob } from "html-docx-js-typescript";
/**
 * 将图片转base64编码
 * @param img
 */
function getBase64ByImg(img) {
  return new Promise((resolve, reject) => {
    img.onload = () => {
      try {
        let canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        const context = canvas.getContext("2d");
        context.drawImage(img, 0, 0, img.width, img.height);
        resolve(canvas.toDataURL("image/png"));
      } catch (error) {
        reject(error);
      }
    };
  });
}
/**
 * 导出为word
 */
async function exportHandler() {
  const dom = document.getElementById("app");
  if (!dom) return;
  const root = dom.cloneNode(true);
  const images = root.querySelectorAll("img");
  for (let i = 0; i < images.length; i++) {
    const ele = images[i];
    ele.setAttribute("crossorigin", "anonymous");
    ele.src = await getBase64ByImg(ele);
    console.log(ele.src);
  }

  const domstr = root.innerHTML;
  const content = `
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
        <div>${domstr}</div>
    </body>
</html>`;
  const blobObj = await asBlob(content);
  const url = URL.createObjectURL(blobObj);
  FileSaver.saveAs(blobObj, "测试.docx");
}
</script>

<style lang="css" scoped>
.page-container {
  background: white;
  text-align: center;
}

.flex-wrap {
  text-align: center;
  display: flex;
}
.image-box {
  padding: 20px 0;
  flex: 1;
}
.image-box img {
  width: 75%;
}

h3,
p {
  text-align: center;
  line-height: 6rem;
  margin: 0;
  padding: 0;
}
.text-box {
  width: 32%;
  /* margin: 0 auto; */
  text-align: left;
  font-size: 1.8rem;
  line-height: 3.5rem;
}
.footer {
  margin-top: 20px;
}

.export-btn {
  display: block;
  margin: 0 auto;
  background-color: skyblue;
  color: #333;
  line-height: 30px;
  padding: 8px 16px;
  margin: 0 auto;
  font-size: 30px;
}

.export-btn:hover {
  cursor: pointer;
}
</style>
